<template>
  <div class="setting">
    <template v-if="tabType == 'data'">
      <div class="card">
        <div class="title">组件样式<text class="ruler">每个尺寸：174*140</text></div>
        <div class="content">
          <div class="main">
            <div class="item" @click="itemClick(0)" :class="{'select-view':tabIndex==0}">2*2</div>
            <div class="item" @click="itemClick(1)" :class="{'select-view':tabIndex==1}">2*2</div>
          </div>
          <el-form-item label="选择图片">
            <div class="sa-flex sa-m-t-10">
              <sa-uploader v-model="settingData.data.cardList[tabIndex].bgImage" fileType="image"></sa-uploader>
            </div>
          </el-form-item>
          <el-form-item label="文字">
            <div class="sa-flex ">
              <el-input v-model="settingData.data.cardList[tabIndex].txt"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="链接">
            <div class="sa-flex ">
              <el-input v-model="settingData.data.cardList[tabIndex].url"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="上圆角">
            <dc-slider v-model="settingData.data.borderRadiusTop"></dc-slider>
          </el-form-item>
          <el-form-item label="下圆角">
            <dc-slider v-model="settingData.data.borderRadiusBottom"></dc-slider>
          </el-form-item>
          <el-form-item label="间距">
            <dc-slider v-model="settingData.data.space"></dc-slider>
          </el-form-item>
        </div>
      </div>
      <dc-goods-select v-model="settingData.data.cardList[tabIndex].goodsList" :multiple="true" :tag="tag"></dc-goods-select>
    </template>
  </div>
</template>

<script setup>
  import { computed,ref } from 'vue';
  import dcGoodsSelect from '../../common/dc-goods-select.vue';
  import dcSlider from '../../common/dc-slider.vue';

  const tag = ref('activityShelves')

  const props = defineProps(['settingData', 'tabType']);

  const tabIndex = ref(0)

  const itemClick=(index)=>{
    tabIndex.value = index;
  }
</script>

<style lang="scss" scoped>
  .main{
    display: flex;
    justify-content: center;
    align-content: center;

    .item{
      height:100px;
      width:100px;
      background: rgba(128, 106, 246, 0.3);
      display: flex;
      align-content: center;
      justify-content: center;
      line-height: 100px;
      border: 1px solid #806AF6;
    }

    .select-view{
      background: #806AF6;
      border: none;
    }
  }
  .ruler{
    font-family: PingFang SC;
    font-size: 12px;
    font-weight: normal;
    line-height: normal;
    letter-spacing: 0em;


    color: #999999;
  }
</style>